<script setup>
import GameLargeItem from "@/components/FrontComponents/GameLargeItem.vue";
import {gamesByCategoryIdGetAPI} from "@/api/FrontApi/game.js";
import {ref, onMounted, watch} from 'vue'
import {useRoute} from "vue-router";

const newData = ref([])

const route = useRoute()
const getGamesData = async (id = route.params.id) =>  {
  const res = await gamesByCategoryIdGetAPI(id)
  newData.value = res.data
}

onMounted(() => getGamesData())

watch(
    () => route.params.id,
    (newValue) => {
      getGamesData(newValue)
    },
    { immediate: true }
);
</script>

<template>
  <div class="store-new-game-panel">
    <div class="container">
      <div class="desc">
        <span class="title">所有游戏</span>
      </div>
      <div class="new-game">
        <div class="item" v-for="item in newData" :key="item">
          <GameLargeItem :game="item"></GameLargeItem>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">
.store-new-game-panel {
  margin-top: 40px;
  margin-bottom: 100px;
  .container {
    .desc {
      display: flex;
      justify-content: space-between;
      .title {
        padding: 4px 6px;
        display: block;
        border-radius: 4px;
        background-color: $themeColor;
        box-shadow: 1px 1px 8px rgba(0, 0, 0, 0.5);
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
      }
    }
    .new-game {
      margin: 10px 0;
      display: flex;
      justify-content: space-between;
      align-content: space-evenly;
      flex-wrap: wrap;
      .item {
        margin-bottom: 20px;
      }
    }
  }
}
</style>
